<template>
  <div v-if="singerInfo.cover" class="singerDetail">
    <!-- 类名可能不太对应文件，因为html和样式都是直接搬MusicListDetail里面的 -->
    <!-- 歌单信息 -->
    <singer-info :singerInfo="singerInfo" />
    <!-- 歌曲列表 -->
    <div class="musicList">
      <el-tabs value="first" @tab-click="clickTab">
        <el-tab-pane label="专辑" name="first">
          <song-table :singerAlbum="singerAlbum" :topSongs.sync="topSongs" />
        </el-tab-pane>
        <el-tab-pane label="MV" name="second">
          <video-list-card :videoList="singerMvInfo.mvs" :isLoad="true" @clickListCardItem="goToVideoDetail" @bottomLoad="bottomLoad"></video-list-card>
        </el-tab-pane>
        <el-tab-pane label="歌手详情" name="third">
          <div class="singerDesc">{{ singerInfo.briefDesc }}</div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <go-top scrollObj=".singerDetail"></go-top>
  </div>
</template>

<script>
import { handleMusicTime } from 'plugins/utils'

import VideoListCard from 'components/videoListCard/VideoListCard.vue'
import GoTop from 'components/goTop/GoTop.vue'
import SingerInfo from './child/SingerInfo.vue'

// 定时器名称
let timer
import SongTable from './child/Table.vue'
export default {
  components: { VideoListCard, GoTop, SingerInfo, SongTable },
  name: 'SingerDetail',
  data() {
    return {
      singerInfo: {},
      // 热门50首
      topSongs: {},
      // 歌手专辑
      singerAlbum: [],
      // 专辑页数
      albumPage: 1,
      disabled: true,
      isAlbumMore: false,
      // 歌手mv数据
      singerMvInfo: { mvs: [], hasMore: false },
      // mv页数
      videoPage: 1,
      // 是否收藏了当前歌手
      isSub: false
    }
  },
  methods: {
    // 请求
    // 请求歌手详情
    async getSingerInfo() {
      let res = await this.$request('/artist/detail', {
        id: this.$route.params.id
      })
      // console.log(res);
      this.singerInfo = res.data.data.artist
    },
    // 请求歌手热门50首歌曲
    async getSingerTopSongs() {
      let res = await this.$request('/artist/top/song', {
        id: this.$route.params.id
      })
      // console.log(res);
      let topSongs = res.data.songs
      // 处理歌单中歌曲的时间
      topSongs.forEach((item, index) => {
        topSongs[index].dt = handleMusicTime(item.dt)
      })
      // topSongs改成对象，并向里面添加isOpen属性，用于点击查看列表所有歌曲
      this.topSongs = { topSongs, isOpen: false }
    },
    // 请求专辑列表 再用专辑id查询专辑信息
    async getAlbumInfo() {
      let res = await this.$request('/artist/album', {
        id: this.$route.params.id,
        limit: 20,
        offset: (this.albumPage - 1) * 20
      })
      this.isAlbumMore = res.data.more
      res = res.data.hotAlbums
      await res.forEach(item => {
        this.getAlbumDetail(item.id)
      })
      // console.log("拿到了专辑数据并保存", this.singerAlbum);
    },
    // 请求专辑详情信息
    async getAlbumDetail(id) {
      let res = await this.$request('/album', { id })
      // 将数组songs再保存一个对象格式，方便组件使用
      res = res.data
      let songs = res.songs
      const album = res.album
      // 处理歌单中歌曲的时间
      songs = songs.map((item, index) => {
        item.dt = handleMusicTime(item.dt)
        return item
      })
      this.singerAlbum.push({
        id: album.id,
        cover: album.blurPicUrl + '?param=300y300',
        songs: songs,
        name: album.name
      })
    },
    // 请求歌手 mv 数据
    async getSingerMv() {
      // 这个接口没有offset 参数
      let res = await this.$request('/artist/mv', {
        id: this.$route.params.id,
        limit: 20 * this.videoPage
      })
      console.log(res)
      this.singerMvInfo = res.data
    },

    // mv上拉加载
    bottomLoad() {
      console.log('bottom')
      if (this.singerMvInfo.hasMore == true) {
        this.videoPage += 1
        this.getSingerMv()
      }
    },
    // 点击视频卡片进入视频详情
    goToVideoDetail({ id }) {
      if (!this.$store.state.isLogin) {
        this.$message.error('登录后才能观看MV哦!')
        return
      }
      // console.log(id);
      this.$router.push({ name: 'videoDetail', params: { id, type: 'mv' } })
    },
    // 点击el-tab-pane的回调
    clickTab(e) {
      console.log(e.index)
      if (e.index == 1 && this.singerMvInfo.mvs.length == 0) {
        this.getSingerMv()
      }
    }
  },
  async created() {
    this.getSingerInfo()
    await this.getSingerTopSongs()
    await this.getAlbumInfo()
  },
  watch: {
    singerAlbum() {
      if (this.singerAlbum.length != 0 && this.isAlbumMore) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    }
  }
}
</script>

<style scoped>
.singerDetail {
  overflow-y: scroll;
}

.musicList {
  margin: 0 10px;
}

.singerDesc {
  font-size: 12px;
  color: #373737;
  line-height: 25px;
  letter-spacing: 0.5px;
  text-indent: 2em;
}

.red {
  color: #ec4141;
}
</style>